<template>
  <el-dialog title="日志详情" width="800px" :before-close="handleClose">
    <div class="row mb-3">
      <div class="col-md-6">
        <p>
          <strong>日志ID：</strong> <span>{{ logDetail.logId }}</span>
        </p>
        <p>
          <strong>操作时间：</strong> <span>{{ logDetail.time }}</span>
        </p>
        <p>
          <strong>操作用户：</strong> <span>{{ logDetail.user }}</span>
        </p>
        <p>
          <strong>用户角色：</strong> <span>{{ logDetail.role }}</span>
        </p>
      </div>
      <div class="col-md-6">
        <p>
          <strong>操作类型：</strong> <span>{{ logDetail.type }}</span>
        </p>
        <p>
          <strong>IP地址：</strong> <span>{{ logDetail.ip }}</span>
        </p>
        <p>
          <strong>设备信息：</strong> <span>{{ logDetail.device }}</span>
        </p>
        <p>
          <strong>操作状态：</strong>
          <el-tag :type="logDetail.status === '成功' ? 'success' : 'danger'"
            >{{ logDetail.status }}
          </el-tag>
        </p>
      </div>
    </div>
    <div class="mb-3">
      <h6>操作内容：</h6>
      <div class="p-3 bg-light rounded">
        {{ logDetail.content }}
      </div>
    </div>
    <div class="mb-3">
      <h6>相关数据：</h6>
      <pre class="p-3 bg-light rounded">{{
        JSON.stringify(logDetail.data, null, 2)
      }}</pre>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from "vue";
import { modalControllers } from "@/stores/modalController.js";

const modalController = modalControllers();
const dialogVisible = ref(false);
const logDetail = reactive({
  logId: "",
  time: "",
  user: "",
  role: "",
  type: "",
  ip: "",
  device: "",
  status: "",
  content: "",
  data: {},
});

const handleClose = (done) => {
  done();
};

const open = (data) => {
  dialogVisible.value = true;
  Object.assign(logDetail, data);
};

defineExpose({
  open,
});
</script>

<style scoped>
/* Add any specific styles here if needed */
.bg-light {
  background-color: #f8f9fa !important;
}

.rounded {
  border-radius: 0.25rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}

.col-md-6 {
  flex: 0 0 auto;
  width: 50%;
}

strong {
  font-weight: bolder;
}
</style>
